{% extends 'layout.html' %}

{% block main %}
<div class="page-header">
    <h1>
        订单管理
        <button class="btn btn-sm btn-success" onclick="create()"><i class="icon-ok"></i>新增</button>
    </h1>
</div><!-- /.page-header -->
<div class="row">
    <div class="col-xs-12">
        <div id="dialog-alert" class="hide">
            <div class="space-6"></div>
            <p id="dialog-text" class="bigger-110 bolder center grey">
                <i class="icon-hand-right blue bigger-120"></i>
            </p>
        </div><!-- #dialog-confirm -->
        <div>
            <nav class="navbar-default" style="border: 1px solid transparent;border-color: #e7e7e7;">
                <div class="container-fluid">
                    <div class="collapse navbar-collapse">
                        <!-- Brand and toggle get grouped for better mobile display -->
                        <div class="navbar-header" style="margin-right: 18px;">
                            <span class="navbar-brand">产品类型</span>
                        </div>
                        <div class="nav navbar-nav form-group">
                            <div class="navbar-form navbar-left">
                                <div class="form-group">
                                    <select id="bu_id" style="width:150px;" class="form-control" >
                                        <option value="-1">所有产品类型</option>
                                        {% for bu in bus %}
                                        <option value="{{bu._id}}">{{bu.bu_name}}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="navbar-header" style="margin-right: 18px;">
                            <span class="navbar-brand">产品型号</span>
                        </div>
                        <div class="nav navbar-nav form-group">
                            <div class="navbar-form navbar-left">
                                <div class="form-group">
                                    <select id="product_id" style="width:150px;" class="form-control">
                                        <option value="-1">所有产品型号</option>
                                        <option value=""></option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="navbar-header" style="margin-right: 18px;">
                            <span class="navbar-brand">订单编号</span>
                        </div>
                        <div class="navbar-form navbar-left">
                            <div class="form-group">
                                <input id="search_project_name" style="width:150px;" type="text" class="form-control" placeholder="模糊搜索">
                            </div>
                            <button id='btn_search' class="btn btn-sm btn-primary">查询</button>
                        </div>
                    </div>
                </div>
                <!-- /.container-fluid -->
            </nav>
        </div>
        <div class="table-header">
            产品列表
        </div>
        <div class="table-responsive">
            <table id="tables" class="table table-striped table-bordered table-hover">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>系统别名</th>
                    <th>应用状态</th>
                    <th>应用描述</th>
                    <th>开发负责人</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
</div>

{% endblock %}

{% block script %}
<script src="/static/js/chosen.jquery.min.js"></script>
<script src="/static/js/jquery.dataTables.min.js"></script>
<script src="/static/js/jquery.dataTables.bootstrap.js"></script>
<script src="/static/js/jquery-ui-1.10.3.full.min.js"></script>
<script src="/static/js/jquery.ui.touch-punch.min.js"></script>
<script src="/static/js/all-config.js"></script>
<script>
    var refresh_products = function(){
        $.ajax({
            url: "/cmdb/query/getAllSub",
            type: "POST",

            data: JSON.stringify({
                "ci_id": $('#bu_id').val()
            }),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                if (data.redirect) {
                    window.location.href = data.redirect;
                    return;
                }
                if (data.success){
                    $( "#product_id").empty();
                    if (data.data.length == 0){
                        $('#btn_search').prop('disabled', false);
                        $( "#product_id").append("<option value='-1'>所有产品型号</option>");
                    }else {
                        $('#btn_search').prop('disabled', true);
                        $('#search_project_name').val('');
                        for (var i = 0, l = data.data.length; i < l; i++) {
                            var record = data.data[i];
                            $("#product_id").append("<option value='" + record._id + "'>"
                                    + record.product_name + "</option>");
                        }
                    }
                    $('#tables').DataTable().fnDraw();
                }else{
                    showDialog("查询失败", data.message);
                }
            }
        });
    };
    var create = function(ciId){
        window.open("/cmdb/ci/add?type=project");
    };
    var edit = function(ciId){
        window.open("/cmdb/ci/edit?type=project&id=" + ciId);
    };
    var showRelation = function(ciId){
        window.open("/cmdb/relation?type=project&id=" + ciId);
    };

    var appExpansion = function(ciId){
        window.open("/cmdb/project/details?ci_id=" + ciId);
    };

    var deleteInfo = function(ciId){
        ret = window.confirm("确认要删除应用?")
        if (!ret) {
            return;
        }

        var saveData = {"id": ciId};
        $.ajax({
            url: "/cmdb/ci/edit/delete",
            type: "POST",
            data: JSON.stringify(saveData),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                if (data.redirect) {
                    window.location.href = data.redirect;
                    return;
                }
                if (data.success){
                    $('#tables').DataTable().fnDraw();
                    alert("删除成功");
                }else{
                    alert("删除失败");
                }
            }
        });
    };
    $(document).ready(function () {
        $('#search_project_name').val('');
        var tableConfig = jQuery.extend(DATATABLE_CONFIG, {
            "aoColumns": [
                {
                    "mDataProp": "_id",
                    "sWidth": "null"
                },
                {
                    "mDataProp": "project_name",
                    "sWidth": "null"
                },
                {
                    "mDataProp": "project_status",
                    "sWidth": "null"
                },
                {
                    "mDataProp": "desc",
                    "sWidth": "null"
                },
                {
                    "mDataProp": "rd_duty",
                    "sWidth": "null"
                },
                {
                    {% if projectExpansionAccess %}
                    "sWidth": "259px"
                    {% else %}
                    "sWidth": "183px"
                    {% endif %}
                }
            ],
            "aoColumnDefs": [
                {
                    "aTargets": [5],  // this your column of action
                    "mData": null,
                    "mRender": function (data, type, full) {
                        if ("{{projectExpansionAccess}}" == "True") {
                            var result = '<div style="width:259px;" class="visible-md visible-lg hidden-sm hidden-xs btn-group">';
                            result += '<button class="btn btn-xs btn-success" onclick="appExpansion(\'' + full._id + '\')">' +
                                        '<i class="icon-cog bigger-120"></i>应用扩容' +
                                        '</button>';
                        } else {
                            var result = '<div style="width:183px;" class="visible-md visible-lg hidden-sm hidden-xs btn-group">';
                        }
                        result += '<button class="btn btn-xs btn-success" onclick="showRelation([' + full._id + '], 0)">' +
                                    '<i class="icon-edit bigger-120"></i>关联关系' +
                                    '</button>';
                        result += '<button class="btn btn-xs btn-primary" onclick="edit([' + full._id + '], 0)">' +
                                    '<i class="icon-edit bigger-120"></i>编辑' +
                                    '</button>';
                        result += '<button class="btn btn-xs btn-danger" onclick="deleteInfo(\'' + full._id + '\')">' +
                                    '<i class="icon-ban-circle bigger-120"></i>删除' +
                                    '</button>' +
                                    '</div>';
                        return result;
                    }
                }
            ],
            "sAjaxSource": "getList",
            "fnServerParams": function (aoData) {
                aoData.push({
                    "name": "product_id",
                    "value": $('#product_id').val()
                });
                aoData.push({
                    "name": "project_name",
                    "value": $('#search_project_name').val()
                });
            },
            "fnServerData": function ( sSource, aoData, fnCallback, oSettings ) {
                oSettings.jqXHR = $.ajax( {
                    "dataType": 'json',
                    "type": "POST",
                    "url": sSource,
                    "data": aoData,
                    //"success": fnCallback,
                    "success": function(data){
                        if (data.redirect) {
                            window.location.href = data.redirect;
                            return;
                        }
                        fnCallback(data.data);
                    },
                    "error": function (e) {
                        showDialog("查询失败", e.message);
                    }
                });
            }
        });
        $('#btn_search').prop('disabled', false);
        $('#btn_search').click(function () {
            $('#tables').DataTable().fnSettings()._iDisplayStart = 0;
            $('#tables').DataTable().fnDraw();
        });
        $('#bu_id option:first').attr('selected','selected');
        $( "#bu_id" ).change(function() {
            refresh_products();
        });

        $('#tables').dataTable(tableConfig);
        $( "#product_id" ).change(function() {
            $('#tables').DataTable().fnDraw();
        });
    });
</script>
{% endblock %}